<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags-->
    <!-- Title-->
    <title>营养配置 -健身猫</title>
    <!-- Favicon-->
    <link rel="icon" href="img/core-img/favicon.ico">
    <!-- Core Stylesheet-->
    <link rel="stylesheet" href="/css/bmr/style1.css" />
    <link rel="stylesheet" href="/css/bmr/style.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<body>
<style>
    #search-list input, .food-form input{
        border: 1px solid #ccc;
        padding: .375rem 1rem;
        font-size: 0.85rem;
        border-radius: .4rem;
        width: 50%;
        margin-right: 5px;
    }
</style>
<!-- Preloader-->
<div class="preloader" id="preloader">
    <div class="spinner-grow text-secondary" role="status">
        <div class="sr-only">Loading...</div></div>
</div>

<div class="page-content-wrapper">
    <div class="container">
        <!-- Profile Wrapper-->
        <div class="profile-wrapper-area py-3">
            <!-- User Information-->
            <div class="card user-info-card">
                <div class="card-body p-4 d-flex align-items-center">
                    <div class="user-profile mr-3">
                        <img src="/img/face_wlcat.png" alt="" />
                        {{--<div class="change-user-thumb">--}}
                        {{--<form>--}}
                        {{--<input class="form-control-file" type="file" />--}}
                        {{--<button><i class="lni-pencil"></i></button>--}}
                        {{--</form>--}}
                        {{--</div>--}}
                    </div>
                    <div class="user-info">
                        <p class="mb-0 text-white">健身猫</p>
                        <h5 class="mb-0">{{ $date }}食物营养-配置中心</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Add To Cart-->
    <div class="cart-form-wrapper bg-white mb-3 py-3">
        <div class="container">
            <div class="top-search-form">
                <form action="#" method="">
                    <input class="form-control" type="search" placeholder="输入食物名称" id="searchInput" />
                    <button type="button"><i class="fa fa-search" id="search"></i></button>
                </form>
            </div>
            @csrf
        </div>
    </div>
    <div class="rating-and-review-wrapper bg-white py-3 mb-3">
        <div class="container">
            <h6>搜索结果: <span id="findExtra" style="display: none; font-size: 0.5rem; color: red;">结果不是您满意？点击我, 深度查找</span></h6>
            <span style="font-size: 0.5rem" class="nutritionRest">剩余：蛋白质：{{ number_format($rest['protein'], 2, '.', '')  }}，脂肪：{{ number_format($rest['fat'], 2, '.', '') }}，碳水化合物：{{ number_format($rest['carbohydrate'], 2, '.', '') }}</span>
            <br>
            <div class="rating-review-content" id="search-list">
                <ul>

                </ul>
            </div>
        </div>
    </div>
    <!-- Rating & Review Wrapper-->
    <div class="rating-and-review-wrapper bg-white py-3 mb-3">
        <div class="container">
            <h6>食物篮子</h6>
            <div class="rating-review-content food-form">
                <ul>
                    @foreach($foods as $food)
                    <li class="single-user-review d-flex" >
                        <div class="user-thumbnail">
                            <img src="/img/food.png" alt=""></div>
                        <div class="rating-comment">
                            <p class="comment mb-0">{{ $food->food_category }}</p>
                            <span class="name-date">数量/克：<input type="text"   class="weight" name="weight" value="{{ $food->food_weight }}"> <button class="del btn btn-warning">删除</button> </span>
                            <span class="name-date nutrition">蛋白质：{{ $food->food_protein }}，脂肪：{{$food->food_fat}}，碳水化合物：{{$food->food_carbohydrate}}</span>
                        </div>
                        <input type="hidden" value="{{ $food->food_id }}" name="id">
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
<!-- Footer Nav-->
<div class="footer-nav-area" id="footerNav">
    <div class="suha-footer-nav h-100">
        <ul class="h-100 d-flex align-items-center justify-content-between">
            <li>
                <a href="/calculate/count">
                    <img src="img/core-img/home.svg" alt="">首页</a></li>
            <li>
                <a href="/logout">
                    <img src="img/core-img/chat.svg" alt="">退出</a></li>
            <li>
                <a href="/calculate/count">
                    <img src="img/core-img/shopping-cart.svg" alt="">评测</a></li>
            <li>
                <a href="/date/{{ isset($date) ? $date : date('Y-m-d') }}">
                    <img src="img/core-img/heart.svg" alt="">营养表</a></li>
            <li>
                <a href="/food/{{ isset($date) ? $date : date('Y-m-d') }}">
                    <img src="img/core-img/settings.svg" alt="">+食物</a></li>
        </ul>
    </div>
</div>
<!-- All JavaScript Files-->
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap4.4.min.js"></script>
<script src="/js/waypoint1.6.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/imagesloaded.pkgd.min.js"></script>
<script src="/js/isotope.pkgd.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/jquery.animatedheadline.min.js"></script>
<script src="/js/jquery.counterup.min.js"></script>
<script src="/js/wow.min.js"></script>
<script src="/js/jarallax.min.js"></script>
<script src="/js/jarallax-video.min.js"></script>
<script src="/js/jquery.passwordstrength.js"></script>
<script src="/js/bmr/active.js"></script>
<script src="/js/moment.js"></script>
<script src="/js/bootstrap-datetimepicker.js"></script>
</body>

</html>
<script>

    $(function() {
        var foods = [{{ collect($foods)->pluck('food_id')->implode(',')  }}],
                foodsArr = JSON.parse('{!! collect($foods)->toJson() !!}');
        var searchFoodUrl = '{{ url('/foodSearch') }}',
                foodAddUrl = '{{ url('foodEdit') }}',
                foodDelUrl = '{{ url('foodDelete')  }}';
                token =  $('input[name=_token]').val();
        function refreshRestData(rest) {
            $('.nutritionRest').html(
                    '剩余：蛋白质：'+rest.protein+'，脂肪：'+rest.fat+'，碳水化合物：'+rest.carbohydrate
            );
        }
        //搜索
        function search(findExtra) {
            var text = $('#searchInput').val();
            if (text == '') return false;
            $.post(searchFoodUrl,{
                'category': text,
                'find_extra': findExtra ? 1 : 0,
                '_token' : token
            }, function(data) {

                var ul = '';
                $(data.data).each(function(key, food) {
                    //如果已经存在了，不渲染
                    if ($.inArray(food.id, foods) < 0) {
                        ul += '<li class="single-user-review d-flex">' +
                                '<div class="user-thumbnail">' +
                                '<img src="/img/food.png" alt=""></div>' +
                                '<div class="rating-comment">' +
                                '<p class="comment mb-0">'+food.category+'</p>' +
                                '<span class="name-date">数量/克：<input type="text"   name="weight" class="weight"> <button class="add btn btn-warning">添加</button> </span>' +
                                '<span class="name-date nutrition">每百克含量：蛋白质：'+food.protein.toFixed(2)+'，脂肪：'+food.fat.toFixed(2)+'，碳水化合物：'+food.carbohydrate.toFixed(2)+'</span>' +
                                '</div><input type="hidden" name="id" value="'+food.id+'">' +
                                '</li>';
                        foodsArr.push(food);
                    }
                    $('#findExtra').show();
                });
                $('#search-list').html(ul);
                if (data.data.length == 0) {
                    alert('没有搜索到: '+ text+' 相关食物');
                }
            }, 'json');
            return false;
        }

        //更新食物，或者添加食物
        function updateOrCreateFood(li) {
            var
                    weight = li.find('input[name=weight]').val(),
                    id     = li.find('input[name=id]').val();
            weight = weight == '' ? 0 : parseInt(weight);
            $.post(foodAddUrl, {
                'weight': weight,
                'id'    : id,
                '_token': token
            }, function(data) {
                //错误
                if (data.error != 0) {
                    alert(data.msg);
                } else {
                    data = data.data;
                    //成功
                    li.find('.btn.add').html('删除').removeClass('add').addClass('del');
                    $('.food-form ul').prepend('<li class="single-user-review d-flex">'+li.html()+'</li>');
                    //初始化输入的值
                    $thisLi = $('.food-form ul').find('li').eq(0);
                    $thisLi.eq(0).find('input[type=text]').val(li.find('input[type=text]').val());
                    li.remove();
                    food = data.data;
                    $thisLi.find('.nutrition').html(
                            '蛋白质：'+food.food_protein+'，脂肪：'+food.food_fat+'，碳水化合物：'+food.food_carbohydrate
                    );
                    foods.push(parseInt(food.food_id));
                    //刷新剩余热量
                    refreshRestData(data.rest);
                }
            })
        }

        $('#search').click(function() {
            search();
        })
        $('#searchInput').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                search();
                return false;
            }
        });
        //编辑
        $('.food-form').on('keypress', '.weight', function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                updateOrCreateFood($(this).parents('li'));
            }
        });
        //新增
        $('#search-list').on('click', '.btn.add', function() {
            updateOrCreateFood($(this).parents('li'));
        });

        //深度查找
        $('#findExtra').click(function() {
            search(true);
        });

        //删除
        $('.food-form').on('click', '.del', function() {
            var that = $(this),
                    id = that.parents('li').find('input[name=id]').val();
            $.post(foodDelUrl, {
                'id': id,
                '_token': token
            }, function(data){
                if (data.error == 0) {
                    that.parents('li').remove();
                    foods[$.inArray(parseInt(id), foods)] = -1;
                    //刷新剩余热量
                    refreshRestData(data.data.rest);
                } else {
                    alert(data.msg);
                }
            }, 'json');

        })
    })
</script>